<template>
  <div>
    <t-card  >
      <t-row justify="space-between">
         <div >
          <t-button @click="handleUpdate(uuid())"> {{ t('pages.listBase.create') }} </t-button>
           
          <p v-if="!!selectedRowKeys.length" >
            {{ t('pages.listBase.select') }} {{ selectedRowKeys.length }} {{ t('pages.listBase.items') }}
          </p>
        </div>
         
      </t-row>
       <t-table dragSort='row' :filter-value="filterValue" @filter-change="onFilterChange"  :multipleSort="true" :sort="sort" @sort-change="sortChange" :data="data" :columns="COLUMNS" row-key="id"  
        :pagination="form"  @select-change="rehandleSelectChange" :selected-row-keys="selectedRowKeys"  :loading="loading"
        :header-affixed-top="headerAffixedTop" @page-change="rehandlePageChange"  
         >
         
        <template #op="slotProps">
          <t-space>
            <t-link theme="primary" @click="handleUpdate(slotProps.row.id)"> 修 改 </t-link>
            <t-link theme="danger" @click="handleClickDel(slotProps)"> {{ t('pages.listBase.delete') }}</t-link>
          </t-space>
        </template>
      </t-table>
    </t-card>
     
    <update-dialog ref="updateDialogRef" @success="fetchData" />
  </div>
</template>
<script lang="ts">
export default {
  name: 'ListBase',
};
</script>
<script setup lang="ts">
 
import { MessagePlugin, PrimaryTableCol, TableRowData, DialogPlugin, } from 'tdesign-vue-next';
import { computed, onMounted, ref } from 'vue';
 
import { getPage, del, } from '@/api/userCenter/material/category'
 
import { prefix } from '@/config/global';
 
import { t } from '@/locales';
import { useSettingStore } from '@/store';
import UpdateDialog from './update.vue';
// 导入 uuid 函数
import { uuid } from '@/utils/txt';
const store = useSettingStore?.();
const COLUMNS: PrimaryTableCol<TableRowData>[] = [
  { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
  {
    title: '标 题',
    width: 320,
    colKey: 'title',
    fixed: 'left',
    sorter: true,
filter: {
      type: 'input',},
  }, 
  {
    title: t('pages.listBase.operation'),
    align: 'left',
    fixed: 'right',
    width: 160,
    colKey: 'op',
  },
];
const data = ref?.([]);
const sort = ref?.([]);
const filterValue = ref?.({ });
const onFilterChange = (filters: any, ctx: any) => {
  filterValue.value = filters;
  fetchData?.();
  
};
const sortChange = (val: any) => {
   
  sort.value = val;
  fetchData?.();
  
};
const form = ref?.({ 
  total: 0, 
  query: '',
  pageNum: 1,
  pageSize: 20,
  searchValue: '',
  filters: '',
  sort: '', 
  title: ''
});
const loading = ref?.(false);
 const fetchData = async () => {
form.value.sort = encodeURIComponent?.(JSON?.stringify?.(sort.value));
  form.value.filters = encodeURIComponent?.(JSON?.stringify?.(filterValue.value));
  loading.value = true;
  const { list, total } = await getPage(form?.value,)
  data.value = list;
  form.value = {
    ...form?.value,
    total: parseInt?.(total),
  };
  loading.value = false;
};
 
onMounted(() => {
  fetchData?.();
});
const selectedRowKeys = ref?.([]);
 
 
const rehandleSelectChange = (value: any, ctx: any, ) => {
  selectedRowKeys.value = value; 
};
const rehandlePageChange = (pageInfo: { current: number; pageSize: number }) => {
  form.value = {
    ...form?.value,
    pageNum: pageInfo?.current,
    pageSize: pageInfo?.pageSize,
  };
  fetchData?.();
};
 
 
const updateDialogRef = ref?.();
const handleUpdate = (id: string) => {
  if (updateDialogRef?.value) {
    updateDialogRef?.value?.openDialog?.(id);
  }
};
const handleClickDel = (row: { rowIndex: any }) => {
  const dialog = DialogPlugin?.({
    header: '确认删除当前所选数据？',
    body: '删除后，所删除的信息将被清空，且无法恢复',
    onConfirm: async ({ e }) => {
      await del?.(row?.row?.id)
      fetchData?.()
      MessagePlugin?.success?.('删除成功');
      dialog?.hide?.();
    },
  });
};
const headerAffixedTop = computed?.(
  () =>
    ({
      offsetTop: store?.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any,
);
</script>
<style lang="less" scoped>

</style>
